
Vue.component('categories', {
    data: function () {
        return {
            // load: 1
        }
    },
    props: ['t'],
    template: `
        <!--outer-->
        <el-row type="flex" justify="center">
            <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
                <!--content-->
                <el-row :type="t" justify="center" :gutter="20" class="categories">
                    <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
                        <div class="categorie">
                            <img src="images/category-1.jpg">
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
                        <div class="categorie">
                            <img src="images/category-2.jpg">
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
                        <div class="categorie">
                            <img src="images/category-3.jpg">
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
                        <div class="categorie">
                            <img src="images/category-1.jpg">
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        `
})
const vue = new Vue({
    el: '#app',
    data: function () {
        return {
            categoriesFlexType: isXS() ? '' : 'flex'
        }
    }
})

window.onresize = function () {
    vue.categoriesFlexType = isXS() ? '' : 'flex'
}
function isXS() {
    return  window.innerWidth < 768
}